<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>强制换行</title>
  <link rel="stylesheet" charset="utf-8" href="../../base.css" />
  <link rel="stylesheet" charset="utf-8" href="./force-wrap.css" />
  <style type="text/css">
		body{padding:30px;}
        p, table{margin-bottom:15px;}
        h3{font-size:20px;}
        table th{background:#fbfbfb;}
        table td, table th{border:1px dotted #eee;padding:10px;}
  </style>
</head>

<body>

<div id="wrapper" class="single">

  <div class="fn-clear" style="margin-bottom:30px;">
  <h3>一般块元素换行:</h3>
  <p class="fn-left sl-wrap" style="width:200px;margin-top:20px;margin-right:30px;background:#e8edef;">
    http://aliceui.com/helloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceui
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
  
  <h3>一般块元素不换行:</h3>
  <p class="fn-left" style="width:200px;margin-top:20px;background:#ffc;">
  http://aliceui.com/helloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceui
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
  </div>
  
  <table width="500px;" class="sl-wrap sl-wrap-table">
    <tr>
      <th colspan="2"><h3>换行的 table:</h3></th>
    </tr>
    <tr>
      <td>
      http://aliceui.com/helloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceui
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </td>
      <td>
      http://aliceui.com/helloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceuihelloalicehelloalicehelloaliceuihelloaliceui
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </td>
    </tr>
  </table>
    
  <table width="500px;" style="margin-bottom:20px;">
  <tr>
    <th colspan="2"><h3>未换行的 table:</h3></th>
  </tr>
    <tr>
      <td>
      http://support.sugarsync.com/ics/support/default.asp?deptID=4579&task=knowledge&questionID=332!!safsafow49737563483; oisdfkhq98w9qhibci3uycriu1nxiu3yzb8snyxr437ctg43uob24t3zni4ybc27ty4372t4ccccix3yt3ui2xgnfrioszrunrsafwqwqfxqw|salfk/1214232s/af/
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </td>
      <td>
      http://support.sugarsync.com/ics/support/default.asp?deptID=4579&task=knowledge&questionID=332!!safsafow49737563483; oisdfkhq98w9qhibci3uycriu1nxiu3yzb8snyxr437ctg43uob24t3zni4ybc27ty4372t4ccccix3yt3ui2xgnfrioszrunrsafwqwqfxqw|salfk/1214232s/af/
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </td>
    </tr>
  </table>
  
</div><!-- #wrapper -->

</body>
</html>
